A web-based application (web-app) is a software application that runs on a remote server. Web browsers are typically used to access and allow users to interact with the web application over a network, such as the Internet. Traditionally, web-based applications are developed using a monolithic architecture. A monolithic web-based application is built as a single unit comprising an application program interface (API) layer, a web server, and a web-app such as a single page application (SPA). The API layer is used to provide data access to the web-app. For example, the API layer may use various data transport methods, such as HTTP (REST), GraphQL, WebSockets, or the like. The API layer may include one or more servers written in one or more languages. The web server serves static content for consumption by the web browser and maps URLs to content on the file system. The web server further proxies requests to the API layer. Web servers may include NGINX, Apache, or the like. The web-app, or SPA, is the web site that the user interacts with via a web browser and includes HTML pages and/or JavaScript running in the web browser. The SPA makes requests to the web server for data and uses the data to build and/or populate web pages. Various frameworks may be used to develop the SPA.
Traditional monolithic web user interfaces (UIs) of web-based applications can quickly grow to a massive scale. This may cause scalability issues due to the raw file size and resultant download and compile times to deploy the web-app. Maintainability issues may also exist due to the inherent complexity of a large code-base, and the risks associated with releasing a large code-base. Large code-bases also do not have clear dividing lines, leading to overlap of multiple concurrent developers, thus decreasing productivity and increasing risk of defects.
Micro frontends provide a solution to the problems associated with the traditional monolithic web-based applications. Micro frontends are small pieces of a web-app. For example, micro frontends may be a single workflow of the web-app, a single feature of the web-app, or a single widget of the web-app. Further, micro frontends can be independently developed and deployed by separate development teams. Micro frontends may be complimentary such that, when combined together, the micro frontends form a feature-rich web-app. Currently, micro frontends have been implemented using two methods.
The first method involves developing the micro frontends (e.g., workflows, features, or widgets) independently as modules having self-contained functionality and the modules can be imported into a larger web application shell. In this method, the modules are bundled together by a bootstrapper application into a host web-app during compile time and then are deployed as one single unit. The host web-app provides app-wide, common functionality. However, there are multiple disadvantages to this approach of using micro frontends. First, only a single frontend framework can be used in this approach, and may even be limited to a single version of the single frontend framework. This makes it difficult to move the application to future technologies. Second, there is only one single point of failure in the bootstrapper application. Third, all of the modules have to be deployed at once, even if only some modules are changed or modified. For example, deploying a module requires the entire application to be rebuilt and redeployed.
The second method also involves developing the micro frontends (e.g., workflows, features, or widgets) independently as modules. In this method, the modules are hosted on a web server and are bundled together by a bootstrapper application during run time, removing the deployment issue of the first method. However, there are multiple disadvantages to this approach of using micro frontends as well. First, similar to the first method, only a single frontend framework can be used in this approach, and may even be limited to a single version of the single frontend framework. Second, also similar to the first method, there is only one single point of failure in the bootstrapper application.
The systems and methods of the present disclosure may solve one or more of the problems set forth above and/or other problems in the art. The scope of the current disclosure, however, is not defined by the attached claims, and not by the ability to solve any specific problem
The background description provided herein is for the purpose of generally presenting the context of the disclosure. Unless otherwise indicated herein, the materials described in this section are not prior art to the claims in this application and are not admitted to be prior art, or suggestions of the prior art, by inclusion in this section.